<template>
  <div>
    <bread class="filter">
      <h1>管理员权限配置</h1>
      <div class="filter-block">
        <normal-filter
          :label="filters.text"
          @change="handleLanguage"
          :options="filters.dataset">
        </normal-filter>
      </div>
      <div class="filter-block">
        <normal-filter
          :label="time_filters.text"
          @change="handleLanguage"
          :options="time_filters.dataset">
        </normal-filter>
      </div>
      <div class="filter-block">
        <search-box
          ref="searchBox"
          class="search-box"
          placeholder="搜索成果"
          :keyword="keyword"
          @search="getSearchWords"
          @clear="clearSearch"
          @active="hideFilter = true"
          @deactive="hideFilter = false">
        </search-box>
      </div>
      <div class="pull-right">
        <el-button size="small" type="primary" @click="dialogVisible = true">添加管理员</el-button>
      </div>
    </bread>
    <pageContent hasPagination hasFixedBottom isCard>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="管理员管理" name="first">
          <el-table
            :data="tableData3"
            stripe
            border
            header-row-class-name="custom-table-header-gray"
            >
            <el-table-column
              fixed
              prop="date"
              label="序号"
              align="center"
              width="150">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width=" ">
            </el-table-column>
            <el-table-column
              prop="province"
              label="工号"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              prop="city"
              label="所属院系/部门"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              prop="address"
              label="管理员类型"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              prop="zip"
              label="手机"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              width="">
              <template slot-scope="scope">
                <a href="javascript: void(0);">添加</a>
                <a href="javascript: void(0);" @click="deleteItem()">移除</a>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="角色说明" name="second">
          <el-table
            :data="tableData3"
            stripe
            border
            header-row-class-name="custom-table-header-gray"
            >
            <el-table-column
              fixed
              prop="date"
              label="角色类型"
              align="center"
              width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="说明"
              align="left"
              width=" ">
            </el-table-column>
            <el-table-column
              prop="province"
              label="人数"
              align="center"
              width="80">
            </el-table-column>
            <el-table-column
              prop="city"
              label="操作"
              align="center"
              width="80">
              <template slot-scope="scope">
                <a href="javascript: void(0);">查看权限</a>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

      </el-tabs>

    </pageContent>
    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>

    <el-dialog
      class="custom-dialog"
      title="添加管理员"
      :visible.sync="dialogVisible"
      width="430px"
      :before-close="handleClose">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动区域">
            <el-popover
              placement="bottom"
              width="310"
              transition="el-zoom-in-top"
              trigger="click">
              <div class="curstom-tabs">
                <el-tabs v-model="active_table" @tab-click="handleClick">
                  <el-tab-pane label="用户管理" name="first">
                    <el-input
                      placeholder="请输入内容"
                      v-model="input23">
                      <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                  </el-tab-pane>
                  <el-tab-pane label="配置管理" name="second">
                     <el-input
                      placeholder="请输入内容"
                      v-model="input23">
                      <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <div class="tree-select">
                      <ul>
                        <li v-for="(item, index) in select_data" :key="index">
                          <div class="title" @click="dropDown(index)">
                            <i class="iconfont el-icon-caret-right" :class="{ active: item.is_open }"></i>
                            {{item.title}}<span>{{item.num}}人</span>
                          </div>
                          <el-collapse-transition>
                            <div class="radio" v-if="item.is_open">
                              <p v-for="it in item.children" :key="it">
                                <el-radio v-model="radio" :label="it.label">{{it.value}}</el-radio>
                              </p>
                            </div>
                          </el-collapse-transition>
                        </li>
                      </ul>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <el-input slot="reference" suffix-icon="el-icon-arrow-down" readonly="readonly" placeholder="请输入内容"></el-input>
            </el-popover>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.date1" placeholder="请选择权限类型">
              <el-option
                v-for="item in grade"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <div class="power-list custom-scrollbar" :class="[{'hover': scrollbarVisible}]" @scroll="paperScroll">
              <ul>
                <li>
                  <div class="main">全局总览</div>
                  <p>
                    <span>查看、搜索、编辑、审核</span>
                  </p>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
                <li>
                  <div class="main">全局总览</div>
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import NormalFilter from 'components/NormalFilter';
import SearchBox from 'components/SearchBox';
import pagination from 'components/pagination';
import scrollbar from 'mixins/scrollbar';
export default {
  name: 'hello',
  data () {
    return {
      active_table: 'first',
      input23: '',
      radio: '1',
      scrollbarVisible: true,
      select_data: [
        {
          title: '生米科学',
          num: 89,
          children: [
            {
              value: 'huanxin',
              label: 1
            }
          ],
          is_open: false
        },
        {
          title: '生米科学',
          num: 89,
          children: [
            {
              value: 'huanxin',
              label: 1
            }
          ],
          is_open: false
        }
      ],
      filters: {
        dataset: [{txt: '全部', val: '0'}, {txt: '中文成果', val: '1'}, {txt: '英文成果', val: '2'}],
        text: '操作模块'
      },
      form: {
        text: ''
      },
      time_filters: {
        dataset: [{txt: '全部', val: '0'}, {txt: '中文成果', val: '1'}, {txt: '英文成果', val: '2'}],
        text: '操作时间'
      },
      total: 1000,
      pageSize: 30,
      keyword: null,
      hideFilter: true,
      dialogVisible: true,
      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      grade: [
        {
          value: 0,
          label: '超级管理员'
        }, {
          value: 1,
          label: '高级管理员'
        }, {
          value: 2,
          label: '普通管理员'
        },
      ],
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
    }
  },
  mixins: [scrollbar],
  methods: {
    pass() {
    },
    getSearchWords() {

    },
    clearSearch() {

    },
    handleLanguage() {

    },
    fetchData(){

    },
    handleClose () {

    },
    handleClick(){},
    dropDown (index) {
      this.select_data[index].is_open = !this.select_data[index].is_open
    },
    deleteItem () {
      this.$confirm('移除后此用户不再是本校管理员，但仍是本校成员。', '确定移除 李云霞 管理员身份？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  },
  components: {
    NormalFilter,
    SearchBox,
    pagination,
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
  .el-select {
    display: block;
  }
  .el-popover {
    width: 320px;
  }

  .power-list {
    overflow-y: auto;
    max-height: 230px;
    background: #EBEEF5;
    padding: 20px;
    border-radius: 3px;
    p {
      margin-left: 20px;
      margin-top: -20px;
    }
  }

</style>
